/**
* 功能描述：时间范围选择器
* @author jin xiaohang
*
* @date 2022/9/28 16:21
* @version 1.0
*/
<template>
    <div class="yw-time-range-picker">
        <div class="yw-time-range-picker-panel">
            <div class="yw-time-range-picker-panel-part yw-time-range-picker-panel-part-left">
                <div class="yw-time-range-picker-input-wrap">
                    <div class="yw-time-range-picker-date-input-wrap">
                        <input class="yw-time-range-input" type="text" placeholder="请选择开始时间" />
                    </div>
                </div>
                <div style="outline: none ; border-right: 1px solid #f0f0f0;">
                    <div class="yw-time-range-picker-panel-header">
                        <div style="position: relative">
                            <span class="yw-time-range-picker-panel-header-title">
                                <a class="yw-time-range-picker-panel-header-title-year">2022年</a>
                                <a class="yw-time-range-picker-panel-header-title-year">9月</a>
                                <a class="yw-time-range-picker-panel-header-title-year">28日</a>
                            </span>
                        </div>
                    </div>
                    <div class="yw-time-range-picker-panel-body">
                        <div class="yw-time-range-picker-panel-select yw-time-range-picker-panel-select-active">
                            <ul>
                                <li class="yw-time-range-picker-panel-select-date">00</li>
                                <li>01</li>
                                <li>02</li>
                                <li>03</li>
                                <li>04</li>
                                <li>05</li>
                                <li>06</li>
                                <li>07</li>
                                <li>08</li>
                            </ul>
                        </div>
                        <div class="yw-time-range-picker-panel-select yw-time-range-picker-panel-select-active">
                            <ul>
                                <li>00</li>
                                <li>01</li>
                                <li>02</li>
                                <li>03</li>
                                <li>04</li>
                                <li>05</li>
                                <li>06</li>
                                <li>07</li>
                                <li>08</li>
                            </ul>
                        </div>
                        <div class="yw-time-range-picker-panel-select yw-time-range-picker-panel-select-active">
                            <ul>
                                <li>00</li>
                                <li>01</li>
                                <li>02</li>
                                <li>03</li>
                                <li>04</li>
                                <li>05</li>
                                <li>06</li>
                                <li>07</li>
                                <li>08</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <span class="yw-time-range-picker-panel-middle">~</span>
            <div class="yw-time-range-picker-panel-part yw-time-range-picker-panel-part-right">
                <div class="yw-time-range-picker-input-wrap">
                    <div class="yw-time-range-picker-date-input-wrap">
                        <input class="yw-time-range-input" type="text" placeholder="请选择结束时间" />
                    </div>
                </div>
                <div>
                    <div class="yw-time-range-picker-panel-header">
                        <div style="position: relative">
                            <span class="yw-time-range-picker-panel-header-title">
                                <a class="yw-time-range-picker-panel-header-title-year">2022年</a>
                                <a class="yw-time-range-picker-panel-header-title-year">9月</a>
                                <a class="yw-time-range-picker-panel-header-title-year">28日</a>
                            </span>
                        </div>
                    </div>
                    <div class="yw-time-range-picker-panel-body">
                        <div class="yw-time-range-picker-panel-select yw-time-range-picker-panel-select-active">
                            <ul>
                                <li class="yw-time-range-picker-panel-select-date">00</li>
                                <li>01</li>
                                <li>02</li>
                                <li>03</li>
                                <li>04</li>
                                <li>05</li>
                                <li>06</li>
                                <li>07</li>
                                <li>08</li>
                            </ul>
                        </div>
                        <div class="yw-time-range-picker-panel-select yw-time-range-picker-panel-select-active">
                            <ul>
                                <li>00</li>
                                <li>01</li>
                                <li>02</li>
                                <li>03</li>
                                <li>04</li>
                                <li>05</li>
                                <li>06</li>
                                <li>07</li>
                                <li>08</li>
                            </ul>
                        </div>
                        <div class="yw-time-range-picker-panel-select yw-time-range-picker-panel-select-active">
                            <ul>
                                <li>00</li>
                                <li>01</li>
                                <li>02</li>
                                <li>03</li>
                                <li>04</li>
                                <li>05</li>
                                <li>06</li>
                                <li>07</li>
                                <li>08</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="yw-time-range-picker-footer">
            <div class="yw-time-range-picker-footer-button">
                <a class="yw-time-range-picker-footer-ok-button">确定</a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "ywTimeRangePicker"
}
</script>

<style scoped>

</style>